<template>
  <div class="scroll-bar" :class="{ 'scroll-bar--is-light': light }">
    <simplebar
      v-if="!hideScrollbar"
      data-simplebar-auto-hide="false"
      class="simple-bar"
    >
      <slot />
    </simplebar>
    <template v-else>
      <slot />
    </template>
  </div>
</template>

<script setup lang="ts">
import simplebar from "simplebar-vue"
import "simplebar-vue/dist/simplebar.min.css"

// 定义组件名称
defineOptions({
  name: 'ScrollBar'
})

// 定义 props
defineProps({
  hideScrollbar: {
    type: Boolean,
    default: false,
  },
  light: {
    type: Boolean,
    default: false,
  },
})
</script>

<style lang="scss">
.scroll-bar {
  .simplebar-track {
    background: #e4e4e6;
    border-radius: 8px;

    &.simplebar-vertical {
      width: 8px;

      .simplebar-scrollbar {
        &::before {
          background: #0032a0;
          opacity: 1;
          width: 8px;
          border-radius: 8px;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
        }
      }
    }

    &.simplebar-horizontal {
      height: 8px;

      .simplebar-scrollbar {
        &::before {
          background: #0032a0;
          opacity: 1;
          height: 8px;
          border-radius: 8px;
          top: 0;
          bottom: 0;
        }
      }
    }
  }

  &--is-light {
    .simplebar-track {
      background: $primary-100;

      &.simplebar-vertical,
      &.simplebar-horizontal {
        .simplebar-scrollbar {
          &::before {
            background: $primary-600;
          }
        }
      }
    }
  }
}
</style>